<template>
  <el-date-picker style="width: 100%" v-model="date" value-format="yyyy-MM-dd" type="daterange" align="right"
    unlink-panels @change="changeTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>

<script>
  import utils from '../../utils/utils.js'
  export default {
      props: ["beginDate",'endDate'],
    data(){
      return{
        pickerOptions: { //时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        },
        date: [],
        query: {
          endDate: '',
          beginDate: '',
        },
      }
    },
    created(){
      if(!utils.isNull(this.beginDate)&&!utils.isNull(this.endDate)){
          this.date.push(this.beginDate)
          this.date.push(this.endDate)
//      } else {
//          this.beginDate = new Date();
//          this.endDate = new Date();
//          this.date.push(this.beginDate)
//          this.date.push(this.endDate)
      }
    },
    watch:{
       beginDate:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
              this.date.push(val)
         },
         deep:true //true 深度监听
        },
        endDate:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
          this.date.push(val)
         },
         deep:true //true 深度监听
        }
    },
    methods: {

      changeTime(data) {
        if (!utils.isNull(data)) {
          if (data.length > 1) {
            this.query.beginDate = data[0]
            this.query.endDate = data[1]
          }
        } else {
          this.query.beginDate = ''
          this.query.endDate = ''
        }
        this.$emit('queryDateClick',this.query)
      },
    }
  }
</script>

<style>
</style>
